import React, { useState } from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  // 声明一个叫 “count” 的 state 变量
  const [count, setCount] = useState(0)

  // useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
  React.useEffect(() => {
    // componentDidMount componentDidUpdate
    console.log('hello ')

    // componentWillUnmount
    return () => {
      console.log('bye')
    }

    // 你可以通知 React 跳过对 effect 的调用，
    // 只要传递数组作为 useEffect 的第二个可选参数即可，
    // 如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。
    // 这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。
  }, [])

  React.useEffect(() => {
    console.log('changing')
    return () => {
      console.log('changed')
    }
  }, [count]) // 仅在 count 更改时更新

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hello Vite + React!</p>
        <p>
          <button type="button" onClick={() => setCount((count) => count + 1)}>
            {' '}
            count is: {count}{' '}
          </button>
        </p>
        <p>
          Edit <code>App.tsx</code> and save to test HMR updates.
        </p>
        <p>
          <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
            Learn React
          </a>
          {' | '}
          <a className="App-link" href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener noreferrer">
            Vite Docs
          </a>
        </p>
      </header>
    </div>
  )
}

export default App
